<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" name="referrer" content="no-referrer">
    <title th:text="'LEMON-'+${article?.title}"></title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/sinaFaceAndEffec.css}">
    <link rel="stylesheet" th:href="@{/css/blog.css}">
</head>

<body>
<div class="blog-masthead">
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"
                            data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" th:href="@{/index}">首 页</a>
                </div>
                <div id="bs-navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a th:href="@{/interview}" class="blog-nav-item">面试那些事</a></li>
                        <li><a th:href="@{/timeTravel}" class="blog-nav-item">时间旅行</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown hidden-xs" th:if="${session.loginUser}!=null">
                            <a href="#" class="blog-nav-img" data-toggle="dropdown" role="button" aria-haspopup="true"
                               aria-expanded="false">
                                <img th:src="${session?.loginUser?.photo ne null}?
                                ${session?.loginUser?.photo}:@{/images/icon-user.png}"
                                     alt="头像" class="img-circle picture shadow">
                            </a>
                            <ul class="dropdown-menu">
                                <li><a th:href="@{'/dynamic/'+${session?.loginUser?.id}}">我的动态</a></li>
                                <li><a th:href="@{'/mydata/'+${session?.loginUser.id}}">我的资料</a></li>
                                <li><a th:href="@{/issue}">发布文章</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a th:href="@{/logout}">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<section id="article" class="article">
    <div class="container">
        <div class="row">
            <div class="left-nav">
                <a href="javascript:;" class="glyphicon glyphicon-heart nav-item like-item"
                   th:classappend="${collect ne null} ? 'active' : ''"
                   th:rel="${collect ne null}?'unlike':'like'"
                   th:badge="${article?.collects}">
                </a>
                <a href="#comment" class="glyphicon glyphicon-comment nav-item comment-item"
                   th:badge="${article?.comments}">
                </a>
            </div>
            <div class="col-lg-12" role="main">
                <div class="blog-post">
                    <h1 th:text="${article?.title}"></h1>
                    <p class="media-item">
                        <!--作者-->
                        <a th:href="@{'/dynamic/'+${article?.uId}}">
                            <span><i class="fa fa-user" th:text="${article?.author}"></i></span>
                        </a>
                        <!--文章浏览数-->
                        <span> <i class="fa fa-eye" th:text="${article?.views}"></i></span>
                        <!--文章发布时间-->
                        <span><i class="fa fa-calendar" th:text="${article?.putime}"></i> </span>
                        <a th:href="@{'/article/edit/'+${article?.id}}"
                           th:if="${article?.uId eq session?.loginUser?.id}">
                            <span><i class="fa fa-pencil-square-o" aria-hidden="true">编辑</i></span>
                        </a>
                    </p>

                    <div class="cover-img">
                        <img th:src="${article?.cover}" alt="封面图片"
                             style="width: 100%;height: auto">
                    </div>
                    <div class="article-content" th:utext="${article?.content}">
                    </div>
                </div>
                <div class="blog-label" style="margin-top: 20px">
                    <strong>本文章关键标签：</strong>
                    <blockquote>
                        <div class="list-unstyled" style="padding: 0">
                            <div class="label-item">
                                <li><a th:href="@{'/label/'+${article?.tag}}" th:text="${article?.tag}"></a>
                                </li>
                            </div>
                        </div>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="container" style="padding-bottom: 100px">
    <div class="col-lg-12">
        <p class="segmentation">评 论</p>
    </div>
    <div class="col-lg-8 col-lg-offset-2">
        <form id="commentForm">
            <textarea id="comment" class="form-control text" rows="5" placeholder="请输入..."
                      style="resize: none;"></textarea>
        </form>
        <p style="margin-top: 5px"><a href="javascript:;" class="face-icon">🙂</a>
            <button class="btn btn-info pull-right"
                    th:onclick="out([[${article?.id}]],[[${session?.loginUser?.id}]],
                    [[${session?.loginUser?.nickname}]],
                    [[${session?.loginUser?.photo ne null}?
                                ${session?.loginUser?.photo}:@{/images/icon-user.png}]])">发表
            </button>
        </p>
        <div id="info-show">
            <div class="media" th:each="comment:${commentList}">
                <div class="media-left">
                    <img th:src="${comment?.photo eq null}?
                    @{/images/icon-user.png}:${comment?.photo}"
                         style="height: 64px;width: 64px"/>
                </div>
                <div class="media-body">
                    <div class="media-heading">
                        <span th:text="${comment?.nickname}"></span>
                        <span style="margin-left: 30px;color: #999999"><small
                                th:text="${comment?.cmtime}"></small></span>
                    </div>
                    <p th:utext="${comment?.content}"></p>
                </div>
            </div>
        </div>
    </div>
</div>


<footer class="blog-footer">
    <p>青柠的博客</p>
    <p>
        <a href="#">返回顶部</a>
    </p>
</footer>

<div id="msgAlert" th:if="${msg ne '' and msg ne null}" class="alert alert-info alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
    <strong th:text="${msg}"></strong>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/sinaFaceAndEffec.js}"></script>
<script th:src="@{/js/all.js}"></script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script th:inline="javascript">
    //收藏按钮
    $('.like-item').click(function () {
//获取rel属性
        var $this = $(this);
        var rel = $this.attr('rel');

        if (rel === 'like') {
            $.post({
                url: '/article/collect',
                data: {id: [[${article?.id}]]},
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    if (result.flag) {
                        //用户收藏了文章 原来的值+1
                        $this.attr("badge", result.data);
                        //添加收藏后的css
                        $this.addClass("active").attr("rel", "unlike");
                    } else {
                        alert(result.msg)
                    }
                },
                error: function () {
                    alert("服务器忙...")
                }
            })
        } else {
            if (confirm('你确定要取消收藏?')) {
                $.post({
                    url: '/article/offCollect',
                    data: {id: [[${article?.id}]]},
                    dataType: 'json',
                    success: function (result) {

                        if (result.flag) {
                            //用户取消了收藏 原来的值-1
                            $this.attr("badge", result.data);
                            //删除css
                            $this.removeClass("active").attr("rel", "like");
                        } else {
                            alert(result.msg)
                        }
                    },
                    error: function () {
                        alert("服务器忙...")
                    }
                })
            }
        }
    });

    // 绑定表情
    $('.face-icon').SinaEmotion($('.text'));

    function out(aid, uid, nickname, photo) {
        if (uid == null) {
            //如果用户id为空，则为没有用户登录，所以当前评论的是游客

            //获取游客ip
            uid = returnCitySN["cip"];
            //设置游客名字
            nickname = '游客' + returnCitySN["cip"];
            //设置游客的头像
            photo = '../images/icon-user.png'
        }
        var inputText = $('.text').val();
        var content = AnalyticEmotion(inputText);

        var comment_badge = parseInt($(".comment-item").attr("badge"));
        if (!isEmpty(content)) {
            $.post({
                url: '/comment/save',
                data: {
                    uId: uid, aId: aid, content: content,
                    photo: photo, nickname: nickname, cmtime: getTime()
                },
                dataType: 'json',
                success: function (result) {
                    if (result.flag) {
                        $('#info-show').append(reply(nickname, photo, content));
                        $(".comment-item").attr("badge", comment_badge + 1);
                        //清空输入框
                        $("#comment").val('');
                        $("#msgAlert").show();
                    } else {
                        alert(result.msg);
                    }
                },
                error: function () {
                    alert("服务器异常....")
                }
            })
        }

    }

    var html;

    function reply(nickname, photo, content) {
        html = '<div class="media" style="padding-bottom: 5px;border-bottom: 1px dashed #e5e5e5">';
        html += '<div class="media-left">';
        html += ' <img src="' + photo + '" style="height: 64px;width: 64px"/>';
        html += '</div>';
        html += '<div class="media-body">';
        html += '<div class="media-heading">';
        html += '<span>' + nickname + '</span>';
        html += '<span style="margin-left: 30px;color: #999999"><small>' + getTime() + '</small></span>';
        html += '</div>';
        html += '<p>' + content + '</p>';
        html += '</div></div>'
        return html;
    }
</script>
</body>

</html>